import { FC, ReactElement, Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; // pnpm add react-router-dom

// import Index from "../pages/index";
// import Login from "../pages/login";

const Index = lazy(() => import("../pages/index"));
const Login = lazy(() => import("../pages/login"));

const lazyload = function (children: ReactElement) {
  return <Suspense fallback={<h1>Loading...</h1>}>{children}</Suspense>;
};

interface Props {}
const ReactRouter: FC<Props> = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={lazyload(<Index />)} />
        <Route path="/login" element={lazyload(<Login />)} />
      </Routes>
    </Router>
  );
};

export default ReactRouter;
